<template>
  <div class="app-container">
    <el-row :gutter="15">

      <el-col style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">充值订单分成信息</span>
          </div>
          <el-form size="small" label-width="90px">
            <el-table v-loading="loading" :data="data" :max-height="tableHeight"
                                          size="small" style="width: 100%;margin-bottom: 15px">
                <el-table-column prop="orderNo" label="订单号" min-width="160px"/>
                <el-table-column prop="userName" label="用户名称" min-width="100px"/>
                <el-table-column prop="agentName" label="代理商" min-width="100px"/>
                <el-table-column prop="amount" label="订单金额"/>
                <el-table-column prop="userAmount" label="用户返还金额" min-width="100px"/>
                <el-table-column prop="agentAmount" label="代理商佣金"/>
                <el-table-column prop="companyAmount" label="公司收入金额" min-width="100px"/>
                <el-table-column prop="isTransfer" label="已转账">
                    <template slot-scope="scope">
                        <div>
                            <el-tag v-if="scope.row.isTransfer === 0" :type="'danger'">否</el-tag>
                            <el-tag v-else :type="'success'">是</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="更新时间">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.updateTime) }}</span>
                    </template>
                </el-table-column>
            </el-table>
          </el-form>
        </el-card>
      </el-col>
      
      <!-- 待转账列表 -->
      <el-col>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">待转账信息</span>
          </div>
          <transferDetail ref="transferDetail"/>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import crud from '@/mixins/crud'
import transferDetail from './transferDetail'

export default {
  name: 'approvalTransfer',
  components: { transferDetail },
  mixins: [crud],
  data() {
    return {}
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 350
    this.id = this.$route.params.id
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = 'api/rechargeOrder'
      const id = this.id
      this.params = { 'id': id }
      return true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .edit-input {
    .el-input__inner {
      border: 1px solid #e5e6e7;
    }
  }
</style>

<style scoped>
  /deep/ .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
